
body {
    background-image: url(/images/drrr12.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

#head {
    background-color: #ffffff;
    filter: alpha(opacity:90);
    opacity: 0.9;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 20.25%;
    position: absolute;
}

#title {
    position: absolute;
    top:0%;
    left: 29%;
    width: 50%;
    height: 25%;
}

#func-style {
    position: absolute;
    top: 10%;
    left: 75%;
    cursor: pointer;
}

#logout-style {
    position: absolute;
    top: 6%;
    left: 80%;
}



#span-style {
    position: absolute;
    top: 15%;
}

#content {

    display:block;
    width:350px;
    height: 75px;
    border: 1px solid #c9c9c9;
    border-radius: 10px;


    font-family: "Microsoft YaHei" ! important;
    font-size: 12px;
    color: #888888;
}
#post-button {
    background: #ffffff;
    position: absolute;
    top: 100%;
    left: 28%;
    padding:3px 23px 3px 16px;
    color: #4d4d4d;
    width: 11em;
    height: 1.825em;
    border-radius: 30px;
    border: 1px solid #edeaea;
    cursor: pointer;
    font-family: "Microsoft YaHei" !important;
    font-size: 15px;
}
#post-button:hover {
    border: 1px solid #acacac;
    color: #acacac;
    background-color: #ffffff;

}



#texteditor {
    position: absolute;
    top: 20%;
    left: 36%;
    height: 58%;
}

.button-membername {
    display: inline-block;
    position: relative;
    top: -1em;
    width: 7em;
    height: 2.2em;
    margin-top: 15px;
    margin-right: 3px;
    margin-bottom:   2px;
    background-color: #e3e3e3;
    border-radius: 30px;
    border: 1px solid #4e4e4e;
    cursor: pointer;
    color: #4e4e4e;
    font-size: 10px;
}
.button-membername:hover{
    border: 2px solid #4e4e4e;
    color: #4e4e4e;
}







#changeroom {
    position: absolute;
    top: 10%;
    left: 1em;

}

#changeroomname {
    position: relative;
    left: 58em;
    top:-3em;
}

span {
    font-family: "Microsoft YaHei" !important;
    font-size: 15px;
    color: #1f1e1e;
}

#changeroomname-input {
    position: relative;
    left: 4%;
    width: 13em;
    height: 2em;
    background-color:#ffffff;
    border: 1px solid #edeaea;
    border-radius: 8px;

}

#changeroomname-button {
    background: #ffffff;
    position: relative;
    padding:0px 10px 0px 10px;
    left:-11%;
    top:0.9em;
    color: #4d4d4d;
    width: 8.1em;
    height: 2em;

    border-radius: 10px;
    border: 1px solid #4e4e4e;
    cursor: pointer;
    font-family: "Microsoft YaHei" !important;
    font-size: 12px;
}


#changeroomname-button1 {
    background: #ffffff;
    position: relative;
    top:0.9em;
    left: 26%;
    padding:0px 10px 0px 10px;
    color: #4d4d4d;
    width: 8.1em;
    height: 2em;

    border-radius: 20px;
    border: 1px solid #4e4e4e;
    cursor: pointer;
    font-family: "Microsoft YaHei" !important;
    font-size: 12px;
}


#changeroomname-button2 {
    background: #ffffff;
    position: relative;
    top:0.9em;
    left: -43%;
    padding:0px 10px 0px 10px;
    color: #4d4d4d;
    width: 8.1em;
    height: 2em;

    border-radius: 20px;
    border: 1px solid #4e4e4e;
    cursor: pointer;
    font-family: "Microsoft YaHei" !important;
    font-size: 12px;
}




#changeroomname-button:hover{
    border: 2px solid #4e4e4e;
    color: #4e4e4e;
}

#changeroomname-button1:hover{
    border: 2px solid #4e4e4e;
    color: #4e4e4e;
}


#changeroomname-button2:hover{
    border: 2px solid #4e4e4e;
    color: #4e4e4e;
}






#chatBank {

    margin: 0 auto;
    position: absolute;
    top: 20.25%;
    left: 27%;
    width: 36em;

    line-height: 1.5em;
    color: #545454;
    background-color: #ffffff;
    filter: alpha(opacity=73);
    opacity: 0.73;
    border-radius: 5px;


}


#showContent{
    position: relative;
    border: 1px solid #edeaea;
    border-radius: 10px;

}